<script>

import {CirclePlusFilled, Lock, Plus, Search, Tools, View} from "@element-plus/icons-vue";
import {defineComponent} from "vue";
import store from "../../store/index.js";
import request from "../../utils/Request.js";
import {ElMessage} from "element-plus";
import router from "../../router/index.js";

export default defineComponent({
  name: 'Project',
  components: {Lock, Tools, View, CirclePlusFilled, Plus},
  computed: {
    store() {
      return store
    },
    Tools() {
      return Tools
    },
    View() {
      return View
    },
    Search() {
      return Search
    }
  },
  data() {
    return {
      projectLoading: true,
      projectDialogFormVisible: false,
      settingProject: {},
      projectType: 'myProjects',
      keyword: '',
      myProjects: [
        {
          id: 1,
          name: '柿子文档',
          description: '一个柿子文档',
          coverUrl: 'null',
          userId: 9
        }, {
          id: 2,
          name: '柿子文档',
          description: '一个柿子文档',
          coverUrl: 'null'
        }, {
          id: 3,
          name: '柿子文档',
          description: '一个柿子文档',
          coverUrl: '/default_project_cover.png',
          isPrivate: 1
        },
      ],
      hisProjects: [
        // {
        //   id: 1,
        //   name: '柿子文档哦',
        //   description: '一个柿子文档',
        //   coverUrl: 'null'
        // }, {
        //   id: 2,
        //   name: '柿子文档哦',
        //   description: '一个柿子文档',
        //   coverUrl: 'null'
        // }, {
        //   id: 3,
        //   name: '柿子文档哦',
        //   description: '一个柿子文档',
        //   coverUrl: '/default_project_cover.png',
        //   isPrivate: 1
        // },
      ],
      projectOptionsVisible: new Array(3).fill(false),
      emptyProjectTips: "您还没有知识库，快去创建吧！",
      myPageSize: 12,
      myTotalPage: 1,
      myCurrentPage: 1,
      hisPageSize: 12,
      hisTotalPage: 1,
      hisCurrentPage: 1,
    }
  },
  methods: {
    router() {
      return router
    },
    setProjectOptionsVisible(index, isVisible) {
      this.projectOptionsVisible[index] = isVisible;
    },
    switchProjectType(type) {
      this.projectType = type
      this.emptyProjectTips = "您还没有知识库，快去创建吧！"
      if (this[type] == null || this[type].length === 0) {
        this.projectLoading = true
        //  切换我的或参与的知识库时 为空则获取知识库名单
        this.getProjects(type, 1, null)
      }
    },
    openSettingProject(index) {
      if (this.projectType === 'myProjects')
        store.state.settingProject = this.myProjects.at(index)
      else
        store.state.settingProject = this.hisProjects.at(index)
      store.state.settingProjectDialogVisible = true
      store.state.projectType = this.projectType
    },
    getProjects(type, page, keyword) {
      this.projectLoading = true
      request({
        method: 'get',
        url: '/api/project/project/list/' + (type === 'myProjects' ? 'my' : 'his'),
        params: {
          page: page,
          keyword: keyword,
          limit: 12
        }
      })
          .then(resp => {
            let data = resp.data
            if (data.code === 0) {
              if (type === 'myProjects') {
                this.myProjects = data.data.list
                this.myPageSize = data.data.pageSize
                this.myTotalPage = data.data.totalPage
                this.myCurrentPage = data.data.currentPage
              } else {
                this.hisProjects = data.data.list
                this.hisPageSize = data.data.pageSize
                this.hisTotalPage = data.data.totalPage
                this.hisCurrentPage = data.data.currentPage
              }
              // update dialog button visible array
              if (data.data.list.length > this.projectOptionsVisible.length) {
                this.projectOptionsVisible = new Array(data.data.list.length).fill(false)
              }

            } else {
              ElMessage.error(data.msg)
              if (type === 'myProjects')
                this.myProjects = []
              else
                this.hisProjects = []
              this.emptyProjectTips = "出现未知错误，请尝试刷新页面！"
            }
            this.projectLoading = false
          })
          .catch(err => {
            ElMessage.error("出现未知错误！")
            if (type === 'myProjects')
              this.myProjects = []
            else
              this.hisProjects = []
            this.emptyProjectTips = "出现未知错误，请尝试刷新页面！"
            this.projectLoading = false
          })
    },
    openProjectTab(projectId) {
      const {href} = router.resolve('/p/' + projectId)
      window.open(href, '_blank')
    },
    openProjectView(projectId) {
      const {href} = router.resolve('/v/' + projectId)
      window.open(href, '_blank')
    },
  },
  created() {
    this.getProjects('myProjects', 1, null)
  },
  watch: {}
})

</script>

<template>

  <el-row>
    <el-col :span="3">
      <el-button text type="info" @click="switchProjectType('myProjects')">
        <el-text type="info" class="pointer" :class="{'selectedProjectType': projectType === 'myProjects'}">
          我创建的知识库
        </el-text>
      </el-button>
    </el-col>
    <el-col :span="3">
      <el-button text type="info" @click="switchProjectType('hisProjects')">
        <el-text type="info" class="pointer" :class="{'selectedProjectType': projectType === 'hisProjects'}">
          我参与的知识库
        </el-text>
      </el-button>
    </el-col>
    <el-col :span="2">
      <el-button plain round type="primary" @click="getProjects(projectType, 1, null)">
        刷新
      </el-button>
    </el-col>
    <el-col :span="3">
      <el-button plain round type="primary" @click="store.state.addProjectDialogVisible = true">
        创建知识库
      </el-button>
    </el-col>
    <el-col :span="5" :offset="8">
      <el-input
          v-model="keyword"
          placeholder="请输入搜索的关键词"
          clearable
          :prefix-icon="Search"
          maxlength="64"
      >
        <template #append>
          <el-button
              @click="getProjects(projectType, 1, keyword)">
            搜索
          </el-button>
        </template>
      </el-input>
    </el-col>
  </el-row>
  <br/>

  <el-row :gutter="20" v-loading="projectLoading">
    <el-col v-if="this[this.projectType] == null || this[this.projectType].length === 0" :span="24">
      <el-empty>
        <template #description>
          <el-text type="info">
            {{ emptyProjectTips }}
          </el-text>
        </template>
      </el-empty>
    </el-col>

    <el-col
        v-for="(project, index) in (projectType === 'myProjects' ? myProjects : hisProjects)"
        :key="project.id"
        :span="4"
    >
      <el-card :body-style="{ padding: '0', height: '256px'}" class="mb-20 wp-100 pointer custom-card" shadow="hover"
               @mouseover="setProjectOptionsVisible(index, true)"
               @mouseleave="setProjectOptionsVisible(index, false)"
      >
        <div class="project-cover">
          <span style="position:absolute; z-index: 10; margin: 5px" v-if=project.isPrivate>
            <el-icon><Lock/></el-icon>
          </span>
          <el-image
              :src="project.coverUrl == null ? '/default_project_cover.png' : project.coverUrl"
              fit="cover"
              class="wp-100 hp-100"
              @click="openProjectTab(project.id)"
          >
            <template #error>
              <el-image fit="cover"
                        class="wp-100 hp-100" src="/default_project_cover.png" @click="openProjectTab(project.id)"/>
            </template>
          </el-image>
          <div class="project-options" v-show="projectOptionsVisible[index]">
            <div class="flex-grow"/>
            <el-tooltip effect="dark"
                        content="浏览"
                        placement="top">
              <el-icon class="mr-10" @click="openProjectView(project.id)">
                <View/>
              </el-icon>
            </el-tooltip>
            <el-tooltip effect="dark"
                        content="设置"
                        placement="top">
              <el-icon class="mr-10" @click="openSettingProject(index)">
                <Tools/>
              </el-icon>
            </el-tooltip>
          </div>
        </div>

        <div class="hp-20 wp-100 pl-5 pr-5 pt-3 ellipsis">
          <el-text type="primary" size="large">
            {{ project.name }}
          </el-text>
          <br/>
          <el-text type="info" size="small">
            {{ project.description }}
          </el-text>
        </div>
      </el-card>
    </el-col>

  </el-row>

  <el-row>
    <el-pagination v-if="projectType === 'myProjects'"
                   hide-on-single-page
                   layout="prev, pager, next"
                   :page-size="myPageSize"
                   :page-count="myTotalPage"
                   v-model:current-page="myCurrentPage"
                   @current-change="val => getProjects(projectType, val, keyword)"
    />
    <el-pagination v-else
                   hide-on-single-page
                   layout="prev, pager, next"
                   :page-size="hisPageSize"
                   :page-count="hisTotalPage"
                   v-model:current-page="hisCurrentPage"
                   @current-change="val => getProjects(projectType, val, keyword)"
    />

  </el-row>

</template>

<style scoped>
.pointer {
  cursor: pointer;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-card {
  position: relative;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); /* 设置阴影程度 */
  overflow: hidden;
}

.custom-card:hover {
  box-shadow: 0 10px 14px rgba(0, 0, 0, 0.4); /* 设置hover时的阴影程度 */
  z-index: 1; /* 确保卡片在hover时显示在其他元素之上 */
}

.project-cover {
  position: relative;
  width: 100%;
  height: 80%;
  display: block;
}

.project-options {
  position: absolute;
  top: 0;
  display: flex;
  background-color: rgba(255, 255, 255, 0.5);
  width: 100%;
  height: 8%;
  padding: 2%;
}

.flex-grow {
  flex-grow: 1;
}

.selectedProjectType {
  font-weight: bolder;
  color: #1c2341;
}
</style>